<template>
  <div class="bodyClass">
    <div class="layer1"></div>
    <div class="layer2"></div>
    <div class="layer3"></div>

    <el-card class="box-card">
      <div class="cardHeard">
        <eyesHead></eyesHead>
      </div>
      <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules">
        <el-form-item prop="name">
          <el-input v-model="ruleForm.name" :prefix-icon="User" />
        </el-form-item>

        <el-form-item style="margin-bottom: 5px" prop="password">
          <el-input v-model="ruleForm.password" type="password" autocomplete="off" show-password :prefix-icon="Lock" />
        </el-form-item>

        <el-checkbox v-model="rememberPassword" label="记住密码" size="large" />

        <el-form-item>
          <el-button class="btnWidth" type="primary" color="#626aef" @click="submitForm(ruleFormRef)">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <div ref="myElement" class="scroll-container"></div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { User, Lock } from '@element-plus/icons-vue'
import eyesHead from './eyesHead.vue'

//枚举,限制属性
interface RuleForm {
  name: string
  password: string
}
const ruleFormRef = ref<FormInstance>()

const rememberPassword = ref(true)
const ruleForm = reactive<RuleForm>({
  name: '11',
  password: '22'
})
const rules = reactive<FormRules<RuleForm>>({
  name: [
    { required: true, message: '请输入账号', trigger: 'blur' },
    { min: 2, max: 5, message: '用户名长度在1到10个字符之间', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在10到20个字符之间', trigger: 'blur' }
  ]
})
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!', ruleForm)
    } else {
      console.log('error submit!', ruleForm)
    }
  })
}

const myElement = ref<HTMLElement | null>()
onMounted(() => {
  const imgs = [
    '/CarouselMap/wallhaven-1.webp',
    '/CarouselMap/wallhaven-2.webp',
    '/CarouselMap/wallhaven-3.webp',
    '/CarouselMap/wallhaven-4.webp',
    '/CarouselMap/wallhaven-5.webp',
    '/CarouselMap/wallhaven-6.webp',
    '/CarouselMap/wallhaven-7.webp',
    '/CarouselMap/wallhaven-8.webp',
    '/CarouselMap/wallhaven-9.webp',
    '/CarouselMap/wallhaven-10.webp',
    '/CarouselMap/wallhaven-12.webp',
    '/CarouselMap/wallhaven-11.webp'
  ]
  let currentIndex = 0

  function createItem(index: any) {
    const imgURL = imgs[index]
    const item = document.createElement('div')
    item.classList.add('item')
    item.innerHTML = `<img src="${imgURL}" />`
    myElement.value!.appendChild(item)
    return item
  }

  function resetElements() {
    myElement.value!.innerHTML = ''
    const prevIndex = currentIndex - 1 < 0 ? imgs.length - 1 : currentIndex - 1
    const nextIndex = currentIndex + 1 > imgs.length - 1 ? 0 : currentIndex + 1
    createItem(prevIndex).classList.add('prev')
    createItem(currentIndex).classList.add('cur')
    createItem(nextIndex).classList.add('next')
  }
  resetElements()

  let isAnimating = false

  function handleTransitionEnd() {
    isAnimating = false
    myElement.value!.classList.remove('scroll-down')
    myElement.value!.classList.remove('scroll-up')
    resetElements()
  }

  myElement.value!.addEventListener(
    'wheel',
    e => {
      // @ts-ignore
      if (!e.wheelDeltaY) return

      if (isAnimating) return
      isAnimating = true
      // @ts-ignore
      if (e.wheelDeltaY < 0) {
        myElement.value!.classList.add('scroll-down')
        currentIndex = currentIndex + 1 > imgs.length - 1 ? 0 : currentIndex + 1
      } else {
        myElement.value!.classList.add('scroll-up')
        currentIndex = currentIndex - 1 < 0 ? imgs.length - 1 : currentIndex - 1
      }
    },
    { passive: true }
  )

  myElement.value!.ontransitionend = () => {
    isAnimating = false
    myElement.value!.classList.remove('scroll-down')
    myElement.value!.classList.remove('scroll-up')
    resetElements()
  }

  setInterval(() => {
    if (isAnimating) return
    isAnimating = true
    myElement.value!.classList.add('scroll-down')
    currentIndex = currentIndex + 1 > imgs.length - 1 ? 0 : currentIndex + 1
  }, 5000)
})
</script>
<style lang="scss" scoped>
.cardHeard {
  height: 120px;
}

.box-card {
  position: fixed;
  top: 25%;
  right: 10%;
  width: 320px;
  height: 350px;
  opacity: 1;
  z-index: 99;
}

.btnWidth {
  width: 100%;
}

::v-deep .el-card__body {
  padding: 20px 40px 40px 40px;
}

.swiper {
  width: 100%;
  height: 100vh;
}

.imgDivClass {
  height: 100%;
  width: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

@function getShadows($n) {
  //scss内置语法,声明方法
  $shadows: '#{random(100)}vw #{random(100)}vh #fff';

  @for $i from 2 through $n {
    $shadows: '#{$shadows}, #{random(100)}vw #{random(100)}vh #fff';
  }

  @return unquote($shadows);
}

$duration: 400s;
$count: 1000;

@for $i from 1 through 3 {
  //scss内置语法,for循环.  循环值:1,2,3,4
  .layer#{$i} {
    //#{} 插值语法   字符串拼接
    $size: #{$i}px; //$声明变量
    $duration: floor($duration / 2); //scss内置的向下取整的方法
    $count: floor($count/2);
    z-index: 9;
    position: fixed;
    width: $size;
    height: $size;
    opacity: 0.5;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: getShadows($count);
    animation: moveUp $duration linear infinite;

    &::after {
      content: '';
      position: fixed;
      top: -100vh; // vh视口高度 vw视口宽度
      left: 0;
      width: $size;
      height: $size;
      box-shadow: inherit; // scss语法,继承上一个元素
      border-radius: inherit;
    }
  }
}

@keyframes moveUp {
  100% {
    transform: translateY(100vh);
  }
}
</style>
<style>
.bodyClass {
  z-index: 12;
  overflow: hidden;
  position: relative;
}
.scroll-container {
  position: relative;
  height: 100vh;
}
.item {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: 1s ease-in-out;
}
.item img {
  position: absolute;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  transition: 1s ease-in-out;
}
.item.prev,
.item.next {
  z-index: 1;
  height: 0;
}
.item.next {
  bottom: 0;
}
.item.next img {
  bottom: 0;
  transform: translateY(10%);
}

.scroll-up .item.prev {
  height: 100%;
}
.scroll-down .item.cur img {
  transform: translateY(-10%);
}
.scroll-down .item.next img {
  transform: translateY(0);
}

.scroll-up .item.prev img {
  transform: translateY(0);
}
.scroll-up .item.cur img {
  transform: translateY(10%);
}

.scroll-down .item.next {
  height: 100%;
}
.item.prev img {
  transform: translateY(-10%);
}
</style>
